<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '退货/售后'
  }
}
</route>

<template>
  <view class="after-sale">
    <view class="tabs">
      <view class="tab" :class="{ active: currentTab === '全部' }" @click="handleTabClick('全部')"> 全部 </view>
      <view class="tab" :class="{ active: currentTab === '待处理' }" @click="handleTabClick('待处理')"> 待处理 </view>
    </view>

    <wd-search v-model="searchValue" placeholder="请输入售后单号" cancel-txt="搜索" @cancel="searchCancel" />

    <view class="order-item" v-for="(item, index) in asList" :key="index" @click="handleReturnGoodsDetail(item)">
      <view class="order-header">
        <text class="order-id">{{ item.asCode || '--' }}</text>
        <text class="order-status">{{ item.asType || '--' }}</text>
        <text class="order-date">{{ item.createTime || '--' }}</text>
      </view>

      <view class="product-info">
        <view class="product-images">
          <wd-img :src="item.applyAttachments" alt="" width="80" height="80"></wd-img>
        </view>
        <view class="review-status">
          <view class="status-box">{{ item.asStatus || '--' }}</view>
        </view>
      </view>

      <view class="order-footer">
        <text class="refund-amount">申请退款：¥{{ item.applyAmount }}</text>
        <view class="refund-amount" v-if="item.refundAmount"> 实际退款：￥{{ item.refundAmount }} </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { getASListByPage } from '@/service/after-sale/after-sale'
import { useProfileStore } from '@/store'
import { useShopcartStore } from '@/store/shopcart'
import { storeToRefs } from 'pinia'
const profileStore = useProfileStore()
const shopcartStore = useShopcartStore()

const { profileInfo, chargeStore } = storeToRefs(profileStore)

const currentTab = ref('全部')

const searchValue = ref('')
const pageNo = ref(1)
const pageSize = ref(10)
const asCode = ref('')
const asList = ref([])
const handleTabClick = (tab: string) => {
  // 清空页码
  asList.value = []
  pageNo.value = 1
  currentTab.value = tab
  initgetASListByPage()
}
const handleReturnGoods = () => {
  // uni.navigateTo({
  //   url: '/pages/return-goods/return-goods',
  // })
}
const handleReturnGoodsDetail = (item: any) => {
  console.log(item)
  uni.navigateTo({
    url: '/pages/return-goods-detail/return-goods-detail?order=' + JSON.stringify(item)
  })
}
const searchCancel = () => {
  // 清空页码
  asList.value = []
  console.log(searchValue.value)
  pageNo.value = 1
  initgetASListByPage()
}

const initgetASListByPage = () => {
  getASListByPage({
    listType: currentTab.value,
    pageNo: pageNo.value,
    pageSize: pageSize.value,
    asCode: searchValue.value,
    storeCode: chargeStore.value.storeCode
  }).then((res) => {
    console.log(res)
    if (res.code === 200) {
      if (res.result.records.length > 0) {
        asList.value.push(...res.result.records)
      } else {
        console.log('暂无多的数据')

        uni.showToast({
          title: '暂无多的数据',
          icon: 'none'
        })
      }
    }
  })
}
onShow(() => {
  initgetASListByPage()
})

onReachBottom(async () => {
  console.log(`触底`)
  pageNo.value = pageNo.value + 1
  initgetASListByPage()
})
</script>

<style lang="scss" scoped>
.after-sale {
  min-height: 100vh;
  background: #f5f5f5;
}

.tabs {
  display: flex;
  padding: 20rpx 0;
  background: #fff;
  border-bottom: 1rpx solid #eee;

  .tab {
    position: relative;
    flex: 1;
    font-size: 28rpx;
    color: #333;
    text-align: center;

    &.active {
      font-weight: bold;
      color: #007aff;

      &::after {
        position: absolute;
        bottom: -20rpx;
        left: 50%;
        width: 40rpx;
        height: 4rpx;
        content: '';
        background: #007aff;
        transform: translateX(-50%);
      }
    }
  }
}

.order-item {
  padding: 20rpx;
  margin: 20rpx;
  background: #fff;
  border-radius: 12rpx;

  .order-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #eee;

    .order-id {
      font-size: 26rpx;
      color: #333;
    }

    .order-date {
      width: 100vw;
      font-size: 26rpx;
      color: #999;
    }

    .order-status {
      font-size: 26rpx;
      color: #333;
    }
  }

  .product-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 0;

    .product-images {
      display: flex;
      gap: 20rpx;

      .product-image {
        width: 160rpx;
        height: 160rpx;
        background: #ff0000;
        border-radius: 8rpx;
      }
    }

    .review-status {
      .status-box {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 160rpx;
        height: 160rpx;
        font-size: 28rpx;
        color: #666;
        border: 1rpx solid #eee;
      }
    }
  }

  .order-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20rpx;
    border-top: 1rpx solid #eee;

    .refund-amount {
      font-size: 26rpx;
      color: #333;
    }

    .logistics-btn {
      padding: 10rpx 30rpx;
      font-size: 26rpx;
      border: 1rpx solid #333;
      border-radius: 30rpx;
    }
  }
}
</style>
